<template>
	<view class="content">
		<page-head :title="i18n.pages.name"></page-head>
		<image src="../../static/tabbar/return.png" mode="" class="page-return" @tap="back"></image>

		<view class="center">
			
			<view class="prompt">
				<image src="../../static/page/love.png" mode="widthFix" class="pt-img"></image>
				<view class="pt-text">{{i18n.user.nametext}}</view>
			</view>
			<!-- <view class="prompt">
				<image src="../../static/page/forget.png" mode="widthFix" class="pt-img"></image>
				<view class="pt-text">{{i18n.user.nametext}}</view>
			</view> -->

			<view class="verified">
				<view class="reminder" v-if="state == -1">{{i18n.user.nametext3}}</view>
				<view class="reminder" v-if="state == 0">{{i18n.user.nametext0}}</view>
				<view class="reminder" v-if="state == 1">{{i18n.user.nametext1}}</view>
				<view class="reminder" v-if="state == 2">{{i18n.user.nametext2}}</view>
				<!-- <view class="reminder">{{i18n.user.reminder}}</view> -->

				<view class="form1">
					<view class="form-top">{{i18n.user.userdata}}</view>

					<view class="form-input1">
						<view class="title">{{i18n.user.realname1}}</view>
						<m-input class="input" type="text" v-model="realname" :placeholder="i18n.user.realname" maxlength="20"></m-input>

						<view class="title">{{i18n.user.phone1}}</view>
						<m-input class="input" type="text" v-model="phone" :placeholder="i18n.user.phone" maxlength="20"></m-input>
					</view>
				</view>

				<view class="form">
					<view class="form-top">{{i18n.user.wechat}}</view>

					<view class="form-input">
						<view class="title">{{i18n.user.wechat1}}</view>
						<m-input class="input" type="text" v-model="wechat" :placeholder="i18n.user.wechats" maxlength="20"></m-input>
					</view>

					<view class="title1">{{i18n.user.wechat_img}}</view>
					<view class="form-img1">
						<block v-if="wechat_qrcode">
							<image :src="wechat_qrcode" mode="widthFix" @click="popup(wechat_qrcode)"></image>
						</block>
					</view>

					<view class="form-img" @click="chooseImage('wechat')" v-if="state < 1">
						<image src="../../static/image/upload.png" mode="widthFix"></image>
					</view>
				</view>

				<view class="form">
					<view class="form-top">{{i18n.user.alipay}}</view>

					<view class="form-input">
						<view class="title">{{i18n.user.alipay1}}</view>
						<m-input class="input" type="text" v-model="alipay" :placeholder="i18n.user.alipays" maxlength="20"></m-input>
					</view>

					<view class="title1">{{i18n.user.alipay_img}}</view>
					<view class="form-img1">
						<block v-if="alipay_qrcode">
							<image :src="alipay_qrcode" mode="widthFix" @click="popup(alipay_qrcode)"></image>
						</block>
					</view>

					<view class="form-img" @click="chooseImage('alipay')" v-if="state < 1">
						<image src="../../static/image/upload.png" mode="widthFix"></image>
					</view>
				</view>

				<view class="form2">
					<block v-if="state < 1">
						<button class="btn-submit" @click="submit()" v-if="status == 1">{{i18n.user.submit}}</button>
						<button class="btn-submit" v-else>{{i18n.user.submit}}</button>
					</block>
					
					<block v-else-if="state == 1">
						<button class="btn-submit2">{{i18n.user.submit1}}</button>
					</block>
					
					<block v-else>
						<button class="btn-submit2">{{i18n.user.submit2}}</button>
					</block>
				</view>
			</view>
		</view>

		<uni-popup :show="showPopup" type="middle" v-on:hidePopup="hidePopup">
			<view class='popup' @tap="shut">
				<image :src="img" mode="widthFix"></image>
			</view>
		</uni-popup>

		<image :src="back_img" mode="" class="back_img" :style="height"></image>
	</view>
</template>

<script>
	import service from '../../service.js';
	import uniPopup from "@/components/uni-popup.vue";
	import mInput from '../../components/m-input.vue';
	import pageHead from '../../components/page-head.vue';
	var wechat_qrcode_update = 0;
	var alipay_qrcode_update = 0;
	export default {
		computed: {
			i18n() {
				return this.$t('index');
			}
		},
		components: {
			uniPopup,
			pageHead,
			mInput
		},
		data() {
			return {
				back_img: uni.getStorageSync('page'),
				height: uni.getStorageSync('height'),
				user: uni.getStorageSync('user'),
				showPopup: false,
				realname: '',
				phone: '',
				wechat: '',
				wechat_qrcode: '',
				alipay: '',
				alipay_qrcode: '',
				img: '',
				type: '',
				status:1,
				state:5,
			};
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.pages.name
			})
			//獲取用戶验证信息
			service.auth(this, service.api.user.verified, {
				'mid': this.user.id
			}, function(self, res) {
				if (res.code == 1) {
					res = res.data;
					self.realname = res.realname;
					self.phone = res.phone;
					self.wechat = res.wechat;
					self.wechat_qrcode = res.wechat_qrcode;
					self.alipay = res.alipay;
					self.alipay_qrcode = res.alipay_qrcode;
					self.state = res.type;
				}
			});
		},
		methods: {
			back() {
				if (this.type == 1) {
					uni.showModal({
						content: this.i18n.user.nametexts,
						cancelText: this.i18n.main.cancel,
						confirmText: this.i18n.main.confirm,
						confirmColor: '#FFAE00',
						cancelColor: '#D2D2D2',
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/main/user'
								})
							}
						}
					});
				} else {
					uni.switchTab({
						url: '/pages/main/user'
					})
				}
			},
			//统一的关闭popup方法
			hidePopup: function() {
				this.showPopup = false;
			},
			shut() {
				this.showPopup = false
			},
			popup(img) {
				this.img = img;
				this.showPopup = true;
			},
			//選擇圖片
			chooseImage: async function(type) {
				self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album','camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						service.upload(this, service.api.user.setcode, {
							'type': type
						}, tempFilePaths[0], 'file', function(_self, res) {
							if (res.code == 1) {
								if(type == 'wechat'){
									self.wechat_qrcode = res.info
								}
								if(type == 'alipay'){
									self.alipay_qrcode = res.info
								}
							}
						});
					}
				})
			},
			
			submit: function(){
				this.status = 0;
				service.upload(this, service.api.user.setver, {
					'realname': this.realname,
					'wechat': this.wechat,
					'alipay': this.alipay,
					'phone': this.phone
				}, '', '', function(self, res) {
					uni.showToast({
						icon: 'none',
						title: res.info
					});
					if(res.code == 1){
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}else{
						self.status = 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0;
		background: #F2F2F2;
	}

	.center {
		z-index: 30;
		width: calc(100% - 60upx);
		margin: 30upx;
	}
	.prompt{
		z-index: 50;
		position: relative;
		width: 86%;
		margin: 0 7%;
		padding: 10upx 0;
		line-height: 30upx;
		border-radius: 40upx;
		background: rgba(255,255,255,.3);
	}
	.pt-img{
		float: left;
		width: 80upx;
		height: 80upx;
		margin: -10upx;
	}
	.pt-text{
		color: #6D6D72;
		font-size: 28upx;
		padding-left: 80upx;
		padding-right: 10upx;
	}

	.verified {
		padding: 40upx 0;
		border-radius: 20upx;
		margin: 30upx 0 60upx;
		background: rgba(255, 255, 255, .7);
	}

	.reminder {
		color: red;
		margin: 0 40upx;
		padding: 10upx 0;
		font-size: 26upx;
		text-align: center;
		line-height: 30upx;
		background: #ffe9e9;
	}

	.form,
	.form1,
	.form2 {
		width: 100%;
		height: 560upx;
		margin-top: 40upx;
		border-top: 2upx solid #BBBBBB;
	}

	.form1 {
		height: 340upx;
		margin-top: 60upx;
	}

	.form2 {
		height: 100upx;
		margin-top: 10upx;
		border-top: 0upx solid #BBBBBB;
	}

	.form-top {
		width: 400upx;
		color: #999999;
		font-size: 32upx;
		line-height: 60upx;
		text-align: center;
		background: #f3c7e8;
		margin: -30upx calc(50% - 200upx) 0;
	}

	.form-input,
	.form-input1 {
		height: 140upx;
		margin: 30upx 60upx 0;
	}

	.form-input1 {
		height: 200upx;
	}

	.form-input .input,
	.form-input .input1,
	.form-input1 .input,
	.form-input1 .input1 {
		height: 60upx;
		margin: 0 0 20upx;
		border-radius: 20upx;
		padding: 10upx 20upx;
		width: calc(100% - 40upx);
		background: rgba(250,49,161,.2);
	}

	.title,
	.title1 {
		color: #26C4C0;
		font-size: 32upx;
		line-height: 30upx;
		text-indent: 42upx;
		margin-bottom: 10upx;
	}

	.title1 {
		text-indent: 100upx;

	}

	.input1 {
		color: #26C4C0;
		font-size: 32upx;
		line-height: 60upx;
	}

	.form-img {
		float: left;
		width: 100upx;
		height: 100upx;
		overflow: hidden;
		margin-top: 200upx;
		margin-left: 20upx;
		border: 4upx solid #871de8;
	}

	.form-img image {
		margin: 10upx;
		width: 80upx;
	}

	.form-img1 {
		float: left;
		width: 300upx;
		height: 300upx;
		overflow: hidden;
		margin-left: 100upx;
		border: 4upx solid #871de8;
	}

	.form-img1 image {
		width: 300upx;
	}

	.btn-submit,.btn-submit2 {
		border: 0;
		height: 80upx;
		line-height: 80upx;
		margin: 30upx 20% 0;
	}
	
	.btn-submit2{
		color: #333333;
		background: #C8C7CC;
		border-radius: 60upx;
	}

	.popup image {
		width: 100%;
	}

	.back_img {
		margin: 0;
	}
</style>
